<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*让html和body的边紧贴视口的边*/
			* {
				margin: 0;
				padding: 0;
			}
			
			/*高度等于视口高度，隐藏文档的滚动条*/
			html{
				height: 100%;
				overflow: hidden;
			}
			
			/*高度等于视口高度，显示body中的滚动条*/
			body{
				overflow: auto;
				height: 100%;
			}

			/*
			这个元素的绝对定位，是参考文档的。
			有了上面的设置，已经关闭了“文档中的滚动条”。
			那么拖动body中的滚动条，test元素将不会再移动。
			
			这些技术细节用于布局中，以后开发很少用到。
			*/
			#test {
				position: absolute;
				left: 50px;
				top: 50px;
				width: 100px;
				height: 100px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<!-- 解决IE6中固定定位的bug -->
		<!-- 去网站 caniuse.com 查询当前属性在哪个浏览器中可以使用 -->
		<div id="test"></div>
		<div style="height: 1000px;"></div>
	</body>
</html>
